<template>
	<view class="index-content">
		<view class="topnav">
			<view :class="type==item.type?'item acitem':'item'" v-for="(item,index) in navList"
				@click="changeNav(item.type)">
				{{$t(item.name)}}
			</view>
		</view>
		<view class="order-list">
			<scroll-view scroll-y="true" style="height:100%;width:100%" @scrolltolower="scrolldata">
				<!-- 我的订单 -->
				<u-empty v-if="orderList.length==0" style="padding-top: 200rpx;" mode="order" iconSize="100"
					textSize="14" :text="$t('OrderEmpty')">
				</u-empty>
				<view class="list" v-if="orderList.length" :style="{direction:i18nLocale=='ug'?'rtl':''}"
					v-for="(item,index) in orderList" @click="handdetail(item.id)">
					<view class="table-content">
						<view class="number">{{item.table_number}}</view>
						<view class="left-content">
							<view class="time">
								{{getDateDiff(item.paid_at?item.paid_at:item.created_at)}}
							</view>
							<view class="" :style="{color:item.payment_status?colortopic():'#f4464b'}">
								{{item.payment_status?$t('PaidOk'):$t('ToBepaid')}}
							</view>
						</view>
					</view>
					<view class="order-item">
						<view class="item" v-for="(subitem,sub_index) in item.items">
							<view class="left">
								<view class="name">{{i18nLocale=='ug'?subitem.ug_name:subitem.cn_name}}</view>
							</view>
							<view class="right">
								<view class="number">X{{subitem.qty}}</view>
								<view class="price">￥{{subitem.price}}</view>
							</view>
						</view>
						<view class="order-price">
							<view class="totalprice-box">
								<text>{{$t('TotalPrice')}}</text>
								<text class="totalprice">￥{{item.fee}}</text>
							</view>
							<text class="order-type" style="color:#999"
								v-if="item.status!=0 || item.status!=null">{{$t('ServedYes')}}</text>
						</view>
						<view class="order-button" v-if="item.status!=4">
							<view class="button" v-if="item.payment_status==0" @click.stop="changefinsh(item.id,'payment_status')">
								{{$t('Pay')}}
							</view>
							<view class="button" v-if="item.payment_status==0"  @click.stop="paybutton('paid',item.id)" style="color:#f4464b;">
								{{$t('OtherWays')}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<Loading :show="loadshow" iconName="circle" bgZindex="99" bgColor="" :text="$t('Loading')"></Loading>
			<Loading :show="tabloadshow" bgZindex="99" iconName="circle-round" :showText="false"></Loading>
		</view>
		<u-modal :show="paidshow"  :content="$t('PaidContent')" :cancelText="$t('Cancel')" :confirmText="$t('Confirm')" @confirm="changeconfrem"  @cancel="paidshow=false" @close="paidshow=false"  closeOnClickOverlay showCancelButton ></u-modal>
		<u-popup :show="codepop" :round="10" mode="center" @close="codeClose" @open="codeOpen">
			<view class="pop-box">
				<view class="pop-title">{{$t('CodePay')}}</view>
				<image :src="path" mode="widthFix" style="width:250rpx;height:250rpx"></image>
				<l-painter isCanvasToTempFilePath @success="path = $event" hidden
					css="width: 100rpx; height:100rpx;">
					<!-- 二维码 -->
					<l-painter-qrcode css="width: 100%; height: 100%;background:#fff"
						:text="code_url"></l-painter-qrcode>
				</l-painter>
				<button @click="downloadCanvas" style="margin-top: 10rpx;font-size: 28rpx;">{{$t('SanePone')}}</button>
				<view class="button-grop">
					<view class="button" @click="paybutton('code')" :style="{backgroundColor:colortopic()}">
						{{$t('PayFinish')}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getorder,
		orderstatus
	} from '@/api/shop.js';

	export default {
		components: {
			
		},
		mounted() {
			if (this.$store.state.shoptoken) {
				this.scrolldata();
			}
		},
		data() {
			return {
				acnav: 0,
				navList: [{
						type: 'all',
						name: 'All'
					},
					{
						type: 'no',
						name: 'ToBepaid'
					}, {
						type: 'ok',
						name: 'PaidOk'
					}
				],
				type: 'all',
				orderList: [],
				pageSize: 5,
				page: 1,
				total: 0,
				to: 1,
				tabloadshow: false,
				loadshow: false,
				codepop: false,
				paidshow:false,
				code_url: '',
				order_id: '',
				path: ''
			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
			Neworder() {
				return this.$store.state.neworder;
			},
			Payorder() {
				return this.$store.state.paid;
			}
		},
		watch: {
			Neworder(newName, oldName) {
				if (this.$store.state.shoptoken) {
					this.changeNav('no');
				}
			},
			Payorder(newName, oldName) {
				if (this.$store.state.shoptoken) {
					this.changeNav('no');
					this.codepop=false;
				}
			},
		},
		methods: {
			scrolldata() {
				if (this.to != this.total) {
					this.loadshow = true;
					this.getOrders();
				} else {

				}
			},
			changeNav(type) {
				this.type = type;
				this.page = 1;
				this.total = 0;
				this.to = 1;
				this.tabloadshow = true;
				this.orderList = [];
				this.getOrders();
			},
			handdetail(id) {
				uni.navigateTo({
					url: '/pages/boos/boosorder/orderdatail?id=' + id
				})
			},
			getOrders() {
				let that = this;
				getorder({
					per_page: that.pageSize,
					page: that.page,
					payment_status: that.type == 'all' ? -5 :that.type == 'no'?0:1
				}).then((res) => {
					if (res.code == 200) {
						let data = res.body;
						that.total = data.total;
						that.to = data.to;
						that.page++;
						let mydata = that.orderList.concat(data.data);
						that.orderList = mydata;
						that.tabloadshow = false;
						that.loadshow = false;
					}
				})
			},
			codeOpen() {},
			codeClose() {
				this.codepop = false;
			},
			changefinsh(id, type) {
				let that = this;
				that.order_id = id;
				if (type == 'status') {
					orderstatus({
						id: id,
						status: 1,
					}).then((res) => {
						if (res.code == 200) {
							that.changeNav('no')
						}
					})
				} else if (type == 'payment_status') {
					that.code_url = 'https://restaurant.dikidiki.cn/pay?order_id=' + id;
					// canvas 生产图片
					that.codepop = true;
				}
			},
			//支付弹出
			paybutton(type,id) {
				let that = this;
				if (type == 'paid') {
					//现金付款
					this.order_id=id;
					that.paidshow=true;
				} else {
					that.changeNav(that.type);
					that.codepop = false;
				}

			},
			changeconfrem(){
				let that = this;
				orderstatus({
					id: that.order_id,
					status: 4,
					payment_status: 1,
					action: 'paid'
				}).then((res) => {
					if (res.code == 200) {
						that.paidshow=false;
						that.changeNav(that.type);
					}
				})
			},
			getDateDiff(dateTimeStamp) {
				var minute = 1000 * 60;
				var hour = minute * 60;
				var day = hour * 24;
				var halfamonth = day * 15;
				var month = day * 30;
				var now = new Date().getTime();
				var diffValue = now - new Date(dateTimeStamp);
				console.log(diffValue, '+++++++++++')
				if (diffValue < 0) {
					return;
				}
				var monthC = diffValue / month;
				var weekC = diffValue / (7 * day);
				var dayC = diffValue / day;
				var hourC = diffValue / hour;
				var minC = diffValue / minute;
				var result = '';
				if (monthC >= 1) {
					result = "" + parseInt(monthC) + this.$t('MonthsAgo');
				} else if (weekC >= 1) {
					result = "" + parseInt(weekC) + this.$t('WeeksAgo');
				} else if (dayC >= 1) {
					result = "" + parseInt(dayC) + this.$t('DaysAgo');
				} else if (hourC >= 1) {
					result = "" + parseInt(hourC) + this.$t('HoursAgo');
				} else if (minC >= 1) {
					result = "" + parseInt(minC) + this.$t('MinutesAgo');
				} else
					result = this.$t('Just');
				return result;
			},
			//下载图片
			downloadCanvas() {
				uni.getSetting({ //获取用户的当前设置
					success: res => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum()
						} else {
							uni.authorize({ //重新发起获取授权
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum()
								},
								fail: () => {
									uni.showToast({
										title: '请打开保存相册权限，再点击保存相册分享',
										icon: 'none',
										duration: 2000
									})
									let timer = setTimeout(() => {
										clearTimeout(timer)
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: e => {}
										})
									}, 2000)
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum() {
				var imgSrc = this.path.slice(22) //base64编码
				// console.log(imgSrc, '++++++++')
				var number = Math.random()
				wx.getFileSystemManager().writeFile({
					filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.jpg',
					data: imgSrc,
					encoding: 'base64',
					success: res => {
						wx.saveImageToPhotosAlbum({
							filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.jpg',
							success: function(res) {
								wx.showToast({
									title: '保存成功',
								})
							},
							fail: function(err) {
								console.log(err)
							}
						})
						console.log(res)
					},
					fail: err => {
						console.log(err)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		.topnav {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: $uni-bg-color-box;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			font-size: $uni-font-size-base;
			position: relative;
			z-index: 120;

			.item {
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0rpx;
			}

			.acitem {
				color: $uni-color-topic;
			}
		}

		.order-list {
			width: 100%;
			height: calc(100% - 80rpx);
			box-sizing: border-box;
			padding: 0rpx 20rpx;

			.list {
				width: 100%;
				background: #FFFFFF;
				box-shadow: $uni-bg-shadow;
				border-radius: $uni-border-radius-lg;
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 40rpx;
				box-sizing: border-box;

				.table-content {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: $uni-font-size-base;
					}

					.number {
						width: 60rpx;
						height: 60rpx;
						border-radius: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: $uni-color-topic;
						color: #fff;
						font-size: $uni-font-size-lg;
					}
					.left-content{
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.time {
						padding: 10rpx 0rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;
						color: #808080;
						margin: 0 50rpx;
					}
				}


				.order-item {
					width: 100%;
					display: flex;
					flex-direction: column;
					position: relative;
					// border-top: 2rpx solid rgba(153, 153, 153, 0.3);
					margin: 10rpx 0rpx;

					.item {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20rpx 0rpx;

						.left {
							display: flex;
							align-items: center;

							image {
								width: 120rpx;
								height: 120rpx;
								border-radius: 20rpx;
							}

							.name {
								color: $uni-color-title;
								font-size: $uni-font-size-base;
								// padding: 0rpx 30rpx;
							}
						}

						.right {
							display: flex;
							align-items: center;

							.price {
								color: $uni-color-topic;
								font-size: $uni-font-size-base;
								// padding: 0rpx 30rpx;
							}

							.number {
								color: $uni-text-color-grey;
								font-size: $uni-font-size-sm1;
								padding: 0rpx 30rpx;
							}

						}

					}

					.totalprice-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: $uni-font-size-base;

						.totalprice {
							color: #f4464b;
							font-size: 32rpx;
						}

						.served {
							padding: 7rpx 10rpx;
							border-radius: 10rpx;
							background-color: $uni-color-topic2;
							color: #fff;
							font-size: $uni-font-size-base;
						}

						.order-type {
							// width: 100rpx;
							// height: 100rpx;
							// border-radius: 100%;
							padding: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							// background-color: $uni-color-topic;
							color: $uni-color-topic;
							font-size: $uni-font-size-lg;
						}
					}

					.order-price {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						// border-top: 2rpx solid rgba(153, 153, 153, 0.3);

						.totalprice-box {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: $uni-font-size-base;
							box-sizing: border-box;

							.totalprice {
								color: #f4464b;
								font-size: 32rpx;
								padding: 0rpx 40rpx;
							}

							.served {
								padding: 7rpx 10rpx;
								border-radius: 10rpx;
								background-color: $uni-color-topic2;
								color: #fff;
								font-size: $uni-font-size-base;
							}

							.order-type {
								// width: 100rpx;
								// height: 100rpx;
								// border-radius: 100%;
								padding: 10rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								// background-color: $uni-color-topic;
								color: $uni-color-topic;
								font-size: $uni-font-size-lg;
							}
						}
					}

					.order-button {
						width: 100%;
						display: flex;
						align-items: center;
						margin-top: 20rpx;
						padding: 0rpx 0rpx;
						box-sizing: border-box;
							
						.button {
							background-color: #fff;
							border-radius: $uni-border-radius-sm;
							padding: 10rpx 40rpx;
							color: $uni-color-topic;
							border: 2rpx solid #999;
							margin: 0rpx 20rpx;
						}
					}
				}

			}
		}
	}

	.pop-box {
		width:500rpx;
		height: 530rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx 60rpx;

		.pop-title {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0rpx;
		}

		.button-grop {
			width: 100%;
			display: flex;
			justify-content: space-around;
			margin-top: 80rpx;
			color: #fff;

			.button {
				border: 1rpx solid #999;
				padding: 10rpx 30rpx;
				border-radius: 20rpx;
				margin: 0rpx 20rpx;
			}
		}
	}
</style>